import 'dart:async';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class MobileController extends GetxController {
  RxString mobile = '135*****038'.obs;

  RxString code = ''.obs;

  RxInt countdownTime = 0.obs;

  late Timer timer;

  void startTime() {
    if (countdownTime.value == 0) {
      countdownTime.value = 59;
      timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
        countdownTime.value--;
        if (countdownTime.value == 0) {
          this.timer.cancel();
        }
      });
    }
  }

  @override
  void onClose() {
    if (timer.isActive) {
      timer.cancel();
    }
    super.onClose();
  }
}

class MobileView extends GetView<MobileController> {
  const MobileView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.backgroundColor,
          appBar: AppBar(
            automaticallyImplyLeading: true,
            leading: InkWell(
              onTap: () {
                Get.back();
              },
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
          ),
          body: SingleChildScrollView(
            padding: EdgeInsets.all(20.w),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '修改手机号',
                    style:
                        StylesUtils.customTextStyle(color: ColorsUtils.color0000, fontSize: 32.sp),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(top: 10.h),
                  alignment: Alignment.centerLeft,
                  child: Text.rich(TextSpan(children: [
                    TextSpan(
                        text: '请输入 ',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999, fontSize: 13.sp)),
                    TextSpan(
                        text: controller.mobile.value,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000, fontSize: 13.sp)),
                    TextSpan(
                        text: ' 的短信验证码，完成安全验证~',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999, fontSize: 13.sp))
                  ])),
                ),
                Container(
                  padding: EdgeInsets.only(top: 30.h, bottom: 25.h),
                  child: Row(
                    children: [
                      Expanded(
                          child: Container(
                        padding: EdgeInsets.only(right: 10.w),
                        child: TextField(
                          controller: ToolsUtils.editingController(controller.code.value),
                          cursorWidth: 2.0,
                          cursorRadius: const Radius.circular(2),
                          keyboardType: TextInputType.number,
                          cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                          style: StylesUtils.customTextStyle(
                              fontSize: 15.sp, color: ColorsUtils.color3333),
                          decoration: InputDecoration(
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15),
                              borderSide: BorderSide.none,
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15),
                              borderSide: BorderSide.none,
                            ),
                            hintText: '请输入验证码',
                            contentPadding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
                            isCollapsed: true,
                            isDense: true,
                            fillColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF8f8),
                            filled: true,
                            hintStyle: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 15.sp),
                          ),
                          onChanged: (String keyword) {
                            controller.code.value = keyword;
                          },
                        ),
                      )),
                      InkWell(
                        onTap: controller.startTime,
                        child: Container(
                          width: 120.w,
                          height: 30.h,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(15.h),
                              border: Border.all(
                                  color:
                                      ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc))),
                          alignment: Alignment.center,
                          child: Text(
                            tips,
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color0000),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Center(
                  child: Container(
                    width: 345.w,
                    height: 45.h,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(color: Colors.white),
                    child: InkWell(
                      onTap: () {
                        Get.toNamed(RoutePath.mobileModify);
                      },
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10.w),
                            gradient: LinearGradient(colors: [
                              ColorsUtils.rgba(52, 120, 246, 1),
                              ColorsUtils.rgba(2, 167, 240, 1)
                            ], stops: const [
                              0,
                              0.99
                            ], transform: GradientRotation(RadianUtils.angleToRadian(90)))),
                        alignment: Alignment.center,
                        child: Text(
                          '下一步',
                          style: StylesUtils.customTextStyle(fontSize: 16.sp),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ));
  }

  String get tips {
    if (controller.countdownTime.value == 0) {
      return '获取验证码';
    }
    return '剩余${controller.countdownTime.value}s';
  }
}
